Formularele sunt elemente ale limbajului HTML.
Un formular se descrie între tag-urile <FORM action=script> și </FORM>. Prin script înțelegem numele script-ului care rulează atunci când datele, comenzile ajung la server. Între cele două tag-uri se inserează diferite componente care permit introducerea datelor sau trimiterea comenzilor.
Revedeți aici aceste elemente HTML învățate deja.
Mai jos găsiți și alte exemple și explicații.
Elementul INPUT
Sintaxa (forma simplificată):
<INPUT name="nume" type="tip" value="valoare" align="tip_aliniere">
unde valoare este valoarea afișată de element și name este numele elementului.
Tipurile posibile descrise mai jos.
Tipul submit
Are aspectul unui buton. La apăsarea lui, datele sunt transmise către server, unde un script le va prelucra.
Ex.
<html lang="en"> <head> <metacharset="utf-8"/> <title></title> </head> <body> <form action="primul.php"> <input type="submit" value="Apasa pentru a rula primul script."/> </form> </body>
</html>
Tipul text
Este de forma unui edit și permite utilizatorului să introducă date. Acestea se trimit către server la apăsarea unui input de tip submit (buton). Pentru ca datele transmise să poată fi recuperate de către un script de pe server, trebuie ca tag-ul form să conțină method="post".
Cum vor fi recuperate aceste valori transmise ?
Există o variabilă $_POST, care este un vector ce reține toate valorile transmise astfel. De exemplu, valoarea transmisă de un input de tip text numit a se recuperează de către un script din vector astfel: $_POST['a'].
Ex.- utilizatorul va introduce 2 valori numerice si scriptul va calcula media aritmetică a lor
Tipul radio
Are aspectul unui buton radio.
Vom folosi mai multe astfel de elemente atunci când vrem să dăm posibilitatea utilizatorului să aleagă o singură opțiune dintre mai multe date. Atenție! toate butoanele trebuie să aibă același nume.
În cazul în care se dorește ca unul dintre butoane să fie bifat de la început implicit, se va folosi opțiunea checked.
La apăsarea elementului de tip submit (butonului), butonul radio bifat va trimite valoarea atașată lui.
Ex.- utilizatorul trebuie să bifeze o singură opțiune, iar script-ul va determina ce s-a ales și va afișa un mesaj
<html lang="en"> <head> <title></title> </head> <body> <form action="alegeButonRadio.php"method="post"> <p>Invat in medie pe zi </p> <input type="radio" name="buton"value="1 ora"checked=""/> 1 ora <br/> <input type="radio" name="buton"value="2 ore"/> 2 ore <br/> <input type="radio" name="buton"value="mai mult de 2 ore"/> mai mult de 2 ore <br/><br/> <input type="submit" value="Trimite"/> </form> </body>
</html>
iar script-ul apelat alegeButonRadio.php conține codul:
Tipul checkbox
Are aspectul unui buton de marcare.
Se folosesc atunci când vrem să marcăm una, mai multe sau nici o opțiune dintre mai multe care sunt date. Obs. Se transmit către server doar valorile butoanelor bifate.
Ex.- utilizatorul trebuie să bifeze o opțiune, mai multe sau niciuna, iar script-ul va determina ce s-a ales și va afișa un mesaj.
- pagina html contine un formular in care puteti alege posturile de radio ascultate
<form action="CheckBox.php" method="post"> <p>Alegeti postul sau posturile de radio pe care le ascultati mai des:</p> <input type="checkbox" name="b1" value="Kiss FM" checked/> Kiss FM <br/> <inputtype="checkbox"name="b2"value="Rock FM"/>Rock FM <br/> <input type="checkbox" name="b3" value="Europa FM"/>Europa FM <br/> <input type="checkbox" name="b4" value="PRO FM"/>PRO FM <br/> <br/> <input type="submit" value="GO"/> </form>
- script-ul CheckBox.php va contine urmatorul cod, care va afisa optiunile alese (codul putea fi scris si folosind instructiunea switch)
<?php $a=0; foreach ($_POSTAS$i=>$nume)
{ if ($i==b1) { echo"Kiss FM <br>"; $a++; } if ($i==b2) { echo"Rock FM <br>"; $a++; } if ($i==b3) { echo"Europa FM <br>"; $a++; } if ($i==b4) { echo"PRO FM <br>"; $a++; }
}
if ($a>0) echo"<br> sunt posturile pe care le asculti mai des. "; else echo"Nu asculti prea des radio." ?>
Tipul password
Se foloseste pentru introducerea parolelor.
Se aseamana cu tipul text, numai ca pentru fiecare caracter tastat se va afisa in control caracterul * (dar datele sunt transmise corect catre server).
Elementul TEXTAREA
Se foloseste pentru introducerea unui text mai lung.
Pentru un astfel de element se pot preciza numarul de linii (row) si numarul de coloane (cols) pe care acesta le va afisa.
Ex.- se va afisa un astfel de elemet, iar cand se va apasa butonul script-ul va afisa ce s-a scris.
Se foloseste pentru a afisa o lista. Fiecare optiune a ei este implementata printr-un element OPTION. Obs. In cazul in care se foloseste intr-un formular atunci se va transmite catre server optiunea selectata.
Ex.- intr-un formular, se va afisa un astfel de elemet, iar cand se va apasa butonul, script-ul va afisa ce s-a selectat in lista.
Un formular se descrie între tag-urile <FORM action=script> și </FORM>. Prin script înțelegem numele script-ului care rulează atunci când datele, comenzile ajung la server. Între cele două tag-uri se inserează diferite componente care permit introducerea datelor sau trimiterea comenzilor.
Revedeți aici aceste elemente HTML învățate deja.
Mai jos găsiți și alte exemple și explicații.
Elementul INPUT
Sintaxa (forma simplificată):
<INPUT name="nume" type="tip" value="valoare" align="tip_aliniere">
unde valoare este valoarea afișată de element și name este numele elementului.
Tipurile posibile descrise mai jos.
Tipul submit
Are aspectul unui buton. La apăsarea lui, datele sunt transmise către server, unde un script le va prelucra.
Ex.
<html lang="en">
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<form action="primul.php">
<input type="submit" value="Apasa pentru a rula primul script."/>
</form>
</body>
</html>
Tipul text
Este de forma unui edit și permite utilizatorului să introducă date. Acestea se trimit către server la apăsarea unui input de tip submit (buton). Pentru ca datele transmise să poată fi recuperate de către un script de pe server, trebuie ca tag-ul form să conțină method="post".
Cum vor fi recuperate aceste valori transmise ?
Există o variabilă $_POST, care este un vector ce reține toate valorile transmise astfel. De exemplu, valoarea transmisă de un input de tip text numit a se recuperează de către un script din vector astfel: $_POST['a'].
Ex.- utilizatorul va introduce 2 valori numerice si scriptul va calcula media aritmetică a lor
pagina HTML conține codul:
<html lang="en">
<head> <title></title> </head>
<body>
<form action="media.php" method ="post">
<p>Dati doua numere:</p>
<input type="text"name="a"/><br/>
<input type="text"name="b"/><br/>
<input type="submit"value="Calculeaza media"/>
</form>
</body>
</html>
iar script-ul apelat media.php conține codul:
<html lang="en">
<head> <title></title> </head>
<body>
<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo"Media = ", ($a+$b)/2;
?>
</body>
</html>
Tipul radio
Are aspectul unui buton radio.
Vom folosi mai multe astfel de elemente atunci când vrem să dăm posibilitatea utilizatorului să aleagă o singură opțiune dintre mai multe date.
Atenție! toate butoanele trebuie să aibă același nume.
În cazul în care se dorește ca unul dintre butoane să fie bifat de la început implicit, se va folosi opțiunea checked.
La apăsarea elementului de tip submit (butonului), butonul radio bifat va trimite valoarea atașată lui.
Ex.- utilizatorul trebuie să bifeze o singură opțiune, iar script-ul va determina ce s-a ales și va afișa un mesaj
<html lang="en">
<head> <title></title> </head>
<body>
<form action="alegeButonRadio.php"method="post">
<p>Invat in medie pe zi </p>
<input type="radio" name="buton"value="1 ora"checked=""/> 1 ora <br/>
<input type="radio" name="buton"value="2 ore"/> 2 ore <br/>
<input type="radio" name="buton"value="mai mult de 2 ore"/> mai mult de 2 ore <br/><br/>
<input type="submit" value="Trimite"/>
</form>
</body>
</html>
iar script-ul apelat alegeButonRadio.php conține codul:
<html lang="en">
<head> <title></title> </head>
<body>
<?php
$a=$_POST['buton'];
echo"Invat in medie pe zi ", $a;
?>
</body>
</html>
Tipul checkbox
Are aspectul unui buton de marcare.
Se folosesc atunci când vrem să marcăm una, mai multe sau nici o opțiune dintre mai multe care sunt date.
Obs. Se transmit către server doar valorile butoanelor bifate.
Ex.- utilizatorul trebuie să bifeze o opțiune, mai multe sau niciuna, iar script-ul va determina ce s-a ales și va afișa un mesaj.
- pagina html contine un formular in care puteti alege posturile de radio ascultate
<form action="CheckBox.php" method="post">
<p>Alegeti postul sau posturile de radio pe care le ascultati mai des:</p>
<input type="checkbox" name="b1" value="Kiss FM" checked/> Kiss FM <br/>
<inputtype="checkbox"name="b2"value="Rock FM"/>Rock FM <br/>
<input type="checkbox" name="b3" value="Europa FM"/>Europa FM <br/>
<input type="checkbox" name="b4" value="PRO FM"/>PRO FM <br/>
<br/>
<input type="submit" value="GO"/>
</form>
- script-ul CheckBox.php va contine urmatorul cod, care va afisa optiunile alese (codul putea fi scris si folosind instructiunea switch)
<?php
$a=0;
foreach ($_POSTAS$i=>$nume)
{
if ($i==b1) { echo"Kiss FM <br>"; $a++; }
if ($i==b2) { echo"Rock FM <br>"; $a++; }
if ($i==b3) { echo"Europa FM <br>"; $a++; }
if ($i==b4) { echo"PRO FM <br>"; $a++; }
}
if ($a>0)
echo"<br> sunt posturile pe care le asculti mai des. ";
else
echo"Nu asculti prea des radio."
?>
Tipul password
Se foloseste pentru introducerea parolelor.
Se aseamana cu tipul text, numai ca pentru fiecare caracter tastat se va afisa in control caracterul * (dar datele sunt transmise corect catre server).
Elementul TEXTAREA
Se foloseste pentru introducerea unui text mai lung.Pentru un astfel de element se pot preciza numarul de linii (row) si numarul de coloane (cols) pe care acesta le va afisa.
Ex.- se va afisa un astfel de elemet, iar cand se va apasa butonul script-ul va afisa ce s-a scris.
<form action="textarea.php" method="post">
<p>Scrieti observatiile:</p><br/>
<textarea name="text" rows="7" cols="25"></textarea>
<br/><br/>
<input type="submit"value="AFISEAZA"/>
</form>
- script-ul va contine codul:
<?php
echo"Obs:";
echo$_POST['text'];
?>
Elementul SELECT
Se foloseste pentru a afisa o lista. Fiecare optiune a ei este implementata printr-un element OPTION.
Obs. In cazul in care se foloseste intr-un formular atunci se va transmite catre server optiunea selectata.
Ex.- intr-un formular, se va afisa un astfel de elemet, iar cand se va apasa butonul, script-ul va afisa ce s-a selectat in lista.
<form action="select.php" method="post">
<select name="lista">
<option value="opt 1">Optiunea 1</option>
<option value="opt 2">Optiunea 2</option>
<option value="opt 3">Optiunea 3</option>
</select>
<input type="submit" value="GO"/>
</form>
- script-ul contine codul:
<?php
$o=$_POST['lista'];
echo"Ati ales ".$o;
?>